<!--
  文件描述：
  创建时间：2023/6/30 15:09
  创建人：LiCY
-->
<template>
  <div class="">
    <div id="valueTrend" style="height: 350px;width: 100%"></div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// 例如：import uploadFile from '@/components/uploadFile/uploadFile'
let echarts = require('echarts')
export default {
  name: 'ValueTrend',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    spcData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    // 这里存放数据
    return {
      data: [],
      valueTrendChart: {},
      valueTrendOption: {},
      rangeTrendChart: {},
      rangeTrendOption: {},
      base: +new Date(2023, 5, 1),
      rangeValues: [],
      controlValues: [],
      line: [],
      lsl: 0,
      usl: 0,
      cpk: 0,
      uclR: 0,
      clX: 0,
      lclR: 0,
      uclX: 0,
      lclX: 0
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 方法集合
  methods: {
    chartInit() {
      this.valueTrendChart = echarts.init(document.getElementById('valueTrend'))
    },
    createData(val) {
      let controlValues = []
      val.controlValues.map(item => {
        controlValues.push([item.name + '', item.value, item.id, item.color])
      })
      this.line = [{
        name: 'uclX',
        value: val.uclX
      }, {
        name: 'lclX',
        value: val.lclX
      }, {
        name: 'clX',
        value: val.clX
      }
      ]
      this.controlValues = controlValues
      this.uclX = val.uclX
      this.lclX = val.lclX
      this.clX = val.clX
      this.cpk = val.cpk
      this.ppk = val.ppk
      if (val.usl) {
        this.line.push({
          name: 'usl',
          value: val.usl
        })
      }
      if (val.lsl) {
        this.line.push({
          name: 'lsl',
          value: val.lsl
        })
      }
      this.usl = val.usl
      this.lsl = val.lsl
      this.initValueTrendChart()
    },
    /**
     * 初始化控制图
     */
    initValueTrendChart() {
      let that = this
      let lsl
      if (that.lsl) {
        lsl = that.lsl.toFixed(4)
      }
      let usl
      if (that.usl) {
        usl = that.usl.toFixed(4)
      }
      let lclX = that.lclX
      let clX = that.clX
      let uclX = that.uclX
      let cpk = that.cpk
      let ppk = that.ppk
      let startLength = 100 - (50 / that.controlValues.length * 100)
      // 指定图表的配置项和数据
      this.valueTrendOption = {
        tooltip: {
          trigger: 'axis',
          transitionDuration: 0,  //鼠标移入抖动
          backgroundColor: 'rgba(255, 255, 255, 0.8)',
          position: 'left'
        },
        title: {
          left: 'left',
          text: 'control chart',
          subtext: 'CPK: ' + cpk + ' PPK:' + ppk,
          subtextStyle: {
            fontSize: 20,
            align: 'center'
          }
        },
        grid: {
          left: '4%',
          right: '4%'
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
          splitLine: {
            show: false
          },
          min: function(e) {
            console.log('进入函数1' + lsl)
            if (lsl) {
              return lsl
            } else {
              return (lclX - lclX * 0.1).toFixed(4)
            }
          },
          max: function(e) {
            console.log('进入函数2' + usl)
            if (usl) {
              return usl
            } else {
              return (uclX + uclX * 0.1).toFixed(4)
            }
          }
        },

        dataZoom: [
          {
            type: 'inside',
            start: startLength,
            end: 100
          },
          {
            start: 0,
            end: 20
          }
        ],
        series: [
          {
            name: 'Data',
            type: 'line',
            data: this.controlValues,
            itemStyle: {
              normal: {
                color: function(seriesIndex) { //拐点颜色回调
                  return seriesIndex.data[3]
                },
                lineStyle: {
                  color: 'green'
                }
              }
            },
            markLine: {
              symbol: 'none',//去掉箭头
              silent: true,
              data: this.line.map(function(item) {
                if (item.name === 'usl' || item.name === 'lsl') {
                  return {
                    yAxis: item.value.toFixed(4),
                    lineStyle: {
                      width: 2,
                      color: 'red',
                      type: 'dotted'
                    }
                  }
                } else if (item.name === 'clX') {
                  return {
                    yAxis: item.value.toFixed(4),
                    lineStyle: {
                      width: 2,
                      color: 'blue',
                      type: 'dotted'
                    }
                  }
                } else {
                  return {
                    yAxis: item.value.toFixed(4),
                    lineStyle: {
                      width: 2,
                      color: 'black',
                      type: 'dotted'
                    }
                  }
                }
              })
            }
          }

        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      this.valueTrendOption && this.valueTrendChart.setOption(this.valueTrendOption)
      const myEvent = new Event('resize')
      window.dispatchEvent(myEvent)
    },
    handleWindowResize() {
      this.valueTrendChart.resize()
    }
  },
  // 监控data中的数据变化
  watch: {
    spcData(val) {
      this.createData(val)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.chartInit()
    window.addEventListener('resize', this.handleWindowResize)
  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>